<!--#include file="common/header.html"-->
<body>
    <div class="container-fluid larry-wrapper">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <!--头部搜索-->
                <section class="panel panel-padding">
                    <form class="layui-form" action="/education/admin/apply">
                        <div class="layui-form">
                            <div class="layui-inline" style="width: 120px">
                                <select name="_query.apply_status">
                                    <option value="">状态</option>
                                    <option value="0">待处理</option>
                                    <option value="1">已退款</option>
                                    <option value="2">已拒绝</option>
                                </select>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input class="layui-input" name="_query.keyword" placeholder="关键字">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button lay-submit class="layui-btn" lay-filter="search" id="search">查找</button>
                            </div>
                        </div>
                    </form>
                </section>

                <!--列表-->
                <section class="panel panel-padding">

                    <div class="group-button">
                        <!--<button class="layui-btn layui-btn-small modal-catch"
                                data-params='{"content":".add-subcat", "title":"添加","type":"1", "area":"600px,580px", "maxmin":"true"}'>
                            <i class="iconfont">&#xe649;</i> 添加
                        </button>-->
                        <button class="layui-btn layui-btn-small layui-btn-danger ajax-all" data-name="checkbox" data-params='{"url": "/education/admin/apply/delete"}'>
                            <i class="iconfont">&#xe626;</i> 删除
                        </button>
                    </div>
                    <div id="list" class="layui-form"></div>

                    <div class="text-right" id="page"></div>
                </section>
            </div>
        </div>
    </div>

    <script id="list-tpl" type="text/html"
            data-params='{"url":"/education/admin/apply","dataName":"applyData","pageid":"#page", "method":"post", "data":"", "async":false}'>
        <table id="example" class="layui-table lay-even" data-name="applyData" data-tplid="list-tpl">
            <thead>
            <tr>
                <th width="30"><input type="checkbox" id="checkall" data-name="checkbox" lay-filter="check"
                                      lay-skin="primary"></th>
                <th>申请人</th>
                <th>订单编号</th>
                <th width="100px">售后类型</th>
                <th width="100px">申请原因</th>
                <th>退款金额</th>
                <th>状态</th>
                <th width="130px">图片</th>
                <th>申请时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {{# layui.each(d.list, function(index, item){ }}
            <tr>
                <td><input type="checkbox" name="checkbox" value="{{ item.id}}" lay-skin="primary"></td>
                <td>{{ item.apply_name }}({{item.apply_tel}})</td>
                <td>{{ item.order_no }}</td>
                <td>{{item.type_name}}</td>
                <td>{{ item.apply_reason ||'' }}</td>
                <td>{{ item.reply_money ||'' }}</td>
                <td>{{ item.apply_status == 0 ? '待处理' : (item.apply_status == 1 ? '已退款' : '已拒绝') }}</td>
                <td>
                <div class="layer-photos-demo{{item.id}}">
                    {{# var imgs = item.apply_img && item.apply_img.split(',')  }}
                    {{# if(imgs) { }}
                    {{# for(var i=0;i< imgs.length; i++){ }}
                    <img layer-src="/education{{ imgs[i] }}"  src="/education{{ imgs[i] }}"
                         onclick="viewImg('{{ item.id }}');"
                         style="height:40px;{{ i>1 ? 'display:none' : ''}}" alt="图片">
                    {{# } } }}
                </div>
                </td>
                <td>{{ item.apply_time ||''}}</td>
                <td>
                    <button class="layui-btn layui-btn-mini" onclick="viewDetail('{{item.id}}');">
                        <i class="iconfont">&#xe653;</i>详情
                    </button>
                </td>
            </tr>
            {{# }); }}
            </tbody>

        </table>
    </script>

    <div class="add-subcat">
        <form class="layui-form layui-form-pane" action="/education/admin/apply/save" id="form1">
            <input type="hidden" name="id" id="viewId">
            <input type="hidden" name="apply_img" id="applyImg">
            <input type="hidden" name="apply_status" id="viewStatus">
            <div class="layui-form-item">
                <label class="layui-form-label">申请人</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="apply_name" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="apply_tel" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="order_no" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">售后类别</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="type_name" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">申请原因</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="apply_reason" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">退款金额</label>
                <div class="layui-input-block">
                    <input type="text" name="reply_money" required jq-verify="required" class="layui-input"
                           id="replyMoney">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">申请时间</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="apply_time" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <!--图片列表-->
            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" type="button" onclick="viewDetailImg()" id="imgTxt">暂无图片</button>
                </div>
            </div>

            <div class="layui-form-item" id="buttonDiv">
                <div class="layui-input-block">
                    <button class="layui-btn" type="button" onclick="approve()">同意</button>
                    <button class="layui-btn layui-btn-primary" type="button" onclick="reject()">拒绝</button>
                </div>
            </div>
        </form>
    </div>

    <div class="edit-subcat">
        <form class="layui-form layui-form-pane" action="/education/admin/apply/save" id="form2">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">申请人</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="apply_name" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="order_no" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">申请原因</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="apply_reason" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">申请时间</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="apply_time" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">退款金额</label>
                <div class="layui-input-block">
                    <input type="text" name="apply_money" required jq-verify="required" class="layui-input ">
                </div>
            </div>
            <!--图片列表-->

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" onclick="approve()">同意</button>
                    <button class="layui-btn layui-btn-primary" onclick="reject()">拒绝</button>
                </div>
            </div>
        </form>
    </div>

    <div class="reject-subcat" style="display: none; padding: 20px">
        <form class="layui-form layui-form-pane" action="/education/admin/apply/reply" id="form3">
            <input type="hidden" name="id" id="rejectId">
            <input type="hidden" name="apply_status" value="2">
            <div class="layui-form-item">
                <label class="layui-form-label">拒绝理由</label>
                <div class="layui-input-block">
                    <textarea name="reply_content" class="layui-textarea" required jq-verify="required" ></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" jq-submit jq-filter="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <div class="submit-modal" style="display: none">
        <form class="layui-form layui-form-pane" action="/education/admin/apply/save" id="form5"></form>
    </div>
</body>
<script type="text/javascript" src="../js/lib/jquery-1.11.2.min.js"></script>
<script src="../js/layui/layui.js"></script>
<script type="text/javascript" src="../js/lib/rest.js"></script>
<script type="text/javascript" src="../../jsfile/jquery/jquery.form.js"></script>
<!--#include file="common/version.html"-->
<script>
    layui.define(['jquery', 'dtable', 'jqdate', 'jqform', 'upload'], function(exports) {
        var $ = layui.jquery,
                list = layui.dtable,
                ajax = layui.ajax,
                laydate = layui.laydate,
                form = layui.jqform,
                oneList = new list();
        oneList.init('list-tpl');
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.photos({
                photos: '.layer-photos-demo'
                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        });

       /* form.set({
            "blur": true,
            "form": "#form1",
            "complete":"test"
        }).init();
        form.test = function(ret, options, that) {
            alert("这是ajax回调方法");
        }*/
        exports('apply', {});
    });

    function viewImg(id) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.photos({
                photos: '.layer-photos-demo' + id
                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        });
    }

    function viewDetailImg() {
        var obj = {
            "title": "", //相册标题
            "id": 123, //相册id
            "start": 0, //初始显示的图片序号，默认0
            "data": [   //相册包含的图片，数组格式
                {
                    "alt": "图片名",
                    "pid": 666, //图片id
                    "src": "http://test.com/education/files/upload/product/p001_1_1_s.jpg", //原图地址
                    "thumb": "http://test.com/education/files/upload/product/p001_1_1_s.jpg" //缩略图地址
                }
            ]
        };
        var imgArr = $('#applyImg').val() && $('#applyImg').val().split(",");
        var itemArr = [];
        for(var i =0; i<imgArr.length; i++) {
            itemArr.push({
                'alt':'','pid':i,'src':'/education'+imgArr[i],'thumb':'/education'+imgArr[i]
            })
        }
        obj.data = itemArr;
        layer.photos({
            photos: obj
            ,anim: 5
        });
    }

    function viewDetail(ids){
        var index = layer.open({
            type: 1,
            title:'详情',
            content: $('.add-subcat')
        });
        layer.full(index);
        $('.imgbox').children().remove();
        $('#form1').attr('action', '/education/admin/apply/reply/' + ids);
        restGet('/education/admin/apply/view/' + ids, null, $('#form1'), function(rs){
            if(rs.status == 200 || rs.code == 200){
                var str =  '<img src="/education{src}" alt="..." class="img-thumbnail" style="width: 200px;">';
                var imgDiv = $('input[name=img]').parent().next().children('.imgbox');
                imgDiv.append(str.replace('{src}', rs.data.img));

                var img = rs.data.apply_img;
                if(img && img.split(",").length) {
                    $('#imgTxt').text('查看图片，共' + img.split(",").length + '张')
                }

                if(rs.data.apply_status != 0) {
                    $('#buttonDiv').hide()
                } else {
                    $('#buttonDiv').show()
                }

                $('#replyMoney').val(rs.data.reply_money || rs.data.apply_money)
            }
        })
    }

    function approve() {
        if($('#viewStatus').val() != 0){
            layer.msg('该条售后已处理')
            return
        }
        var money = $('#replyMoney').val();
        layer.confirm('确定退款￥' + money + '？', {icon: 3, title:'提示'}, function(index){
            layer.close(index);
            var param =  {id: $('#viewId').val(), reply_content: '', 'apply_status' : 1, 'reply_money': money};
            restInsert('/education/admin/apply/reply', param, $('#form5'),function (rs) {
                if(rs.status == 200){
                    layer.msg('操作成功');
                    layer.closeAll();
                    $('#search').click()
                } else {
                    layer.msg(rs.msg)
                }
            })
        });
    }

    function reject() {
        if($('#viewStatus').val() != 0){
            layer.msg('该条售后已处理')
            return
        }
        $('#rejectId').val($('#viewId').val());
        var index = layer.open({
            type: 1,
            title:'操作',
            content: $('.reject-subcat'),
            area: '500px'
        });
    }
</script>

</html>